<template>

    <div class="post-list">
        <article v-for="post in list" :key="post._id" class="card mb-3 shadow-sm">
            <div class="card-body text-left">
                <h4>{{ post.title }}</h4>
                <div class="row my-3 align-items-center">
                    <div v-if="post.image && post.image.url" class="col">
                        <img :src="post.image.url" :alt="post.title" class="rounded-lg w-75" />
                    </div>
                    <p :class="{ 'col-9': post.image }">{{ post.content }}</p>
                </div>
                <span class="text mute">{{ post.createdAt }}</span>
            </div>
        </article>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch } from "vue";
import { PostProps } from "@/store";
export default defineComponent({
    props: {
        list: {
            type: Array as PropType<PostProps[]>,
            default: () => [],
        },
    },
    setup(props) {
        return {};
    },
});
</script>

<style scoped></style>
